<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../js/angular.js" charset="utf-8"></script>
    </head>
    <body ng-app="App">

        <!-- <my-directive></my-directive>

        <div my-directive></div>

        <div class="my-directive"></div> -->

        <!-- directive: my-directive -->

        <hr>
        <div ng-controller="Ctrl">

            <!-- <h2 ng-repeat="item in data">{{ item }}</h2> -->


            <h2></h2>
            <p></p>

        </div>



    </body>
    <script type="text/javascript">

        angular.module('App', [])

        .controller('Ctrl', ['$scope', function ($scope) {
            $scope.data = ['标题一', '标题二', '标题三', '标题四'];
        }])

        // 自定义指令
        .directive('myDirective', function () {
            return {
                restrict: "ECMA",
                replace: true,
                template: `
                    <div>
                        <h2>{{ item }}</h2>
                        <section>内容</section>
                        <footer>尾部</footer>
                    </div>
                `,
                controller: function ($scope) {

                }
            };
        })

        // 自定义指令或自定义标签，主要目的，使用简短的代码，来代替某一块的结构
        // 四种用法：标签名、属性名、class值、注释  E A C M
        // 如果需要使用注释的写法时候，需要添加 replace: true，否则无法使用
        // replace: true代表将template中的内容替换掉自定义指令，而是不是插入到内容部
        // template属性对应的为字符串，即替换后的结构





    </script>
</html>
